<template>
	<div>
		<el-breadcrumb class="bread-title" style="font-size:14px;">
			<el-breadcrumb-item>财务结算</el-breadcrumb-item>
			<el-breadcrumb-item>支付板块</el-breadcrumb-item>
			<el-breadcrumb-item>第三方支付查询</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form ref="form" :model="formData" label-width="120px" :inline="true">
			<el-form-item label="订单号：">
				<el-input size="mini" placeholder="请输入订单号" v-model.trim="formData.orderCode"></el-input>
			</el-form-item>
			<el-form-item label="交易流水号：">
				<el-input size="mini" placeholder="请输入交易流水号" v-model.trim="formData.serialNum"></el-input>
			</el-form-item>
			<el-form-item label="购房者：">
				<el-input size="mini" placeholder="手机号/姓名" v-model.trim="formData.customerNameOrPhone"></el-input>
			</el-form-item>
			<el-form-item label="支付方式：">
				<el-select size="mini" v-model="formData.paymentMethod">
					<el-option v-for="item in paymentMethods" :key="item.label" :value="item.value" :label="item.label"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="支付状态：">
				<el-select size="mini" v-model="formData.paymentStatus">
					<el-option v-for="item in paymentStatuss" :key="item.label" :value="item.value" :label="item.label"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="支付时间：">
				<el-date-picker size="mini"
					v-model="formData.beginTime"
					type="date"
					placeholder="选择日期">
				</el-date-picker>
			</el-form-item>
			<span style="font-size:14px;line-height: 40px;">至</span>
			<el-form-item label="">
				<el-date-picker size="mini"
					v-model="formData.endTime"
					type="date"
					placeholder="选择日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="mini" @click="exportXsl">导入</el-button>
				<el-button type="primary" size="mini" @click="query" id="monitorEnter">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" border stripe size="mini">
			<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
			<el-table-column label="交易流水号" prop="serialNum" :show-overflow-tooltip="true" align="center"></el-table-column>
			<el-table-column label="订单号" prop="orderCode" :show-overflow-tooltip="true" align="center"></el-table-column>
			<el-table-column label="客户" prop="customerName" :show-overflow-tooltip="true" align="center"></el-table-column>
			<el-table-column label="支付时间" prop="paymentTime" :show-overflow-tooltip="true" align="center" :formatter="initTime"></el-table-column>
			<el-table-column label="支付方式" prop="paymentMethod" :show-overflow-tooltip="true" align="center" :formatter="initPayMeyhods"></el-table-column>
			<el-table-column label="对方账号" prop="opposingAccount" :show-overflow-tooltip="true" align="center"></el-table-column>
			<el-table-column label="实付款金额" prop="payNum" :show-overflow-tooltip="true" align="center" :formatter="initMoney"></el-table-column>
			<el-table-column label="支付/退款状态" prop="paymentStatus" :show-overflow-tooltip="true" align="center" :formatter="initPayStatus"></el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="lookDetail(scope.row.id)">查看详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="formData.pageNum"
			:page-sizes="[10, 20, 40, 50]"
			:page-size="formData.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total" style="margin-top:30px;">
		</el-pagination>
	</div>
</template>

<script>
	import utils from "../../common/utils"
	export default{
		name:"thirdpay",
		title:'第三方支付查询',
		data(){
			return {
				paymentMethods:[
					{value:"",label:"全部"},{value:"0",label:"微信支付"},{value:"1",label:"支付宝支付"},{value:"3",label:"线上通联支付"},{value:"4",label:"POS刷卡支付"},{value:"5",label:"POS扫码支付"}
				],
				paymentStatuss:[
					{value:"",label:"全部"},{value:"1",label:"支付成功"},{value:"2",label:"支付失败"},{value:"3",label:"退款成功"},{value:"4",label:"退款中"},
					{value:"5",label:"退款失败"}
				],
				tableData:[],
				total:0,
				formData:{
					orderCode:"",//订单号
					serialNum:"",//第三方流水号
					customerNameOrPhone:"",//客户姓名或手机号
					paymentMethod:"",//支付方式
					beginTime:"",
					endTime:"",
					paymentStatus:"",//支付状态
					pageNum:1,
					pageSize:10
				}
			}
		},
		methods:{
			getTimeString(timestamp) {
		        if (timestamp) {
		            const time = new Date(timestamp)
		            let dateStr = ''
		            const year = time.getFullYear()
		            const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
		            const day = String(time.getDate()).length === 1 ? '0' + time.getDate() : time.getDate()
		            dateStr = year + '-' + month + '-' + day
		            let timeStr = ''
		            const hours = time.getHours()
		            const hh = String(hours).length === 1 ? '0' + hours : hours
		            const minutes = time.getMinutes()
		            const mm = String(minutes).length === 1 ? '0' + minutes : minutes
		            const seconds = time.getSeconds()
		            const ss = String(seconds).length === 1 ? '0' + seconds : seconds
		            timeStr = `${hh}:${mm}:${ss}`
		            return dateStr
		        } else {
		            return ''
		        }
		    },
			query(){
				this.formData.pageNum=1;
				this.formData.beginTime=this.getTimeString(this.formData.beginTime);
				this.formData.endTime=this.getTimeString(this.formData.endTime);
				this.loadData();
			},
			initPayStatus(row, column, cellValue, index){
				if(cellValue==1){
					return "支付成功"
				}else if(cellValue==2){
					return "支付失败" 
				}else if(cellValue==3){
					return "退款成功"
				}else if(cellValue==4){
					return "退款中"
				}else if(cellValue==5){
					return "退款失败"
				}else{
					return ""
				}
			},
			initMoney(row, column, cellValue, index){
				if(cellValue!=0&&cellValue!=""&&cellValue!=null){
					let tempValue = parseFloat(cellValue)
        			return tempValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				}
			},
			initPayMeyhods(row, column, cellValue, index){
				if(cellValue==0){
					return "微信"
				}else if(cellValue==1){
					return "支付宝"
				}else if(cellValue==2){
					return "合支付"
				}else if(cellValue==3){
					return "通联"
				}else if(cellValue==4){
					return "POS-刷卡"
				}else if(cellValue==5){
					return "POS-扫码"
				}else{
					return ""
				}

			},
			initTime(row, column, cellValue, index){
				if(cellValue){
					return utils.getTimeString(cellValue)
				}
			},
			loadData(){
				this.$axios.post(`/raise/dealingOpposingOrder/selectDealingOpposingOrderPageList`,this.formData).then(res => {
	                this.tableData=res.list;
	                this.total=res.total;
	            });
			},
			handleSizeChange(val){
		 		this.formData.pageSize = val;
		        this.loadData();
			},
			handleCurrentChange(val){
				this.formData.pageNum = val;
				this.loadData();
			},
			lookDetail(id){
				this.$router.push({
					path:"/thirdpaydetail",
					query:{
						id:id
					}
				})
			},
			exportXsl(){
				this.$router.push({
					path:"/importFile"
				})
			}
		},
		mounted(){
			this.loadData()
		},
		activated(){
			this.query()
		}
	}
</script>

<style lang="stylus">
	
</style>
